<template>
	<section class="captiontextstyle">
		<!-- 表单 -->
		<el-form label-width="80px" :model="$store.state.$currentproperties" size="small" :rules="rules">
			<!-- 标题内容 -->
			<el-form-item label="标题内容">
				<el-input v-model="$store.state.$currentproperties.name" placeholder="请输入标题" show-word-limit />
			</el-form-item>

			<div style="height: 10px" />

			<!-- 描述内容 -->
			<el-form-item label="描述内容">
				<el-input type="textarea" v-model="$store.state.$currentproperties.description"
					placeholder="请输入要说明的文字，最多 100 字" maxlength="100" />
			</el-form-item>

			<div style="height: 10px" />

			<!-- 显示位置 -->
			<el-form-item label="显示位置">
				<div class="weiz">
					<i :class="$store.state.$currentproperties.positions === 'left' ? 'active' : ''"
						class="iconfont icon-horizontal-left"
						@click="$store.state.$currentproperties.positions = 'left'" />
					<i :class="$store.state.$currentproperties.positions === 'center' ? 'active' : ''"
						class="iconfont icon-juzhong" @click="$store.state.$currentproperties.positions = 'center'" />
					<!-- <i
          :class="$store.state.$currentproperties.positions === 'right' ? 'active': ''"
          class="iconfont icon-juyou"
          @click="$store.state.$currentproperties.positions = 'right'"
          /> -->
				</div>
			</el-form-item>

			<div style="height: 10px" />

			<!-- 标题大小 -->
			<el-form-item label="标题大小" prop="wordSize" :hide-required-asterisk="true">
				<el-input type="number" v-model.number="$store.state.$currentproperties.wordSize"
					placeholder="请输入标题文字大小" :maxlength="2" />
			</el-form-item>

			<div style="height: 10px" />

			<!-- 描述大小 -->
			<el-form-item label="描述大小" prop="descriptionSize" :hide-required-asterisk="true">
				<el-input type="number" v-model.number="$store.state.$currentproperties.descriptionSize"
					placeholder="请输入描述文字大小" />
			</el-form-item>

			<div style="height: 10px" />

			<!-- 标题粗细 -->
			<el-form-item label="标题粗细" prop="wordWeight" :hide-required-asterisk="true">
				<el-input type="number" v-model.number="$store.state.$currentproperties.wordWeight"
					placeholder="请输入标题粗细" />
			</el-form-item>

			<div style="height: 10px" />

			<!--描述粗细 -->
			<el-form-item label="描述粗细" prop="descriptionWeight" :hide-required-asterisk="true">
				<el-input type="number" v-model.number="$store.state.$currentproperties.descriptionWeight"
					placeholder="请输入描述粗细" />
			</el-form-item>

			<div style="height: 10px" />

			<!-- 标题颜色 -->
			<el-form-item label="标题颜色">
				<!-- 颜色选择器 -->
				<el-color-picker v-model="$store.state.$currentproperties.wordColor" show-alpha class="picke"
					:predefine="predefineColors">
				</el-color-picker>
			</el-form-item>

			<div style="height: 10px" />

			<!-- 描述颜色 -->
			<el-form-item label="描述颜色">
				<!-- 颜色选择器 -->
				<el-color-picker v-model="$store.state.$currentproperties.descriptionColor" show-alpha class="picke"
					:predefine="predefineColors">
				</el-color-picker>
			</el-form-item>


			<div style="height: 10px" />

			<!--查看更多 -->
			<el-form-item label="底部分割线" class="wid">
				{{ $store.state.$currentproperties.borderBott ? '显示' : '隐藏' }}
				<el-checkbox v-model="$store.state.$currentproperties.borderBott" />
			</el-form-item>

			<div style="height: 10px" />

			<!-- 更多样式选择 -->
			<el-form-item label="样式">
				<el-radio-group v-model="$store.state.$currentproperties.type">
					<el-radio-button :value="'empty'">默认</el-radio-button>
					<el-radio-button :value="'line'">竖线</el-radio-button>
					<el-radio-button :value="'circle'">圆角</el-radio-button>
					<el-radio-button :value="'square'">方形</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<!-- 跳转链接 -->
			<el-form-item label="跳转链接">
				<el-radio-group v-model="$store.state.$currentproperties.more.httpType" style="margin-left: 18px">
					<el-radio :value="10">内部链接</el-radio>
					<el-radio :value="11">外部链接</el-radio>
				</el-radio-group>

				<!-- 输入http -->
				<el-input v-model="$store.state.$currentproperties.more.http" placeholder="请输入跳转链接" show-word-limit
					style="margin-top: 10px" />
			</el-form-item>
		</el-form>
	</section>
</template>

<script>
	export default {
		name: 'WdCaptiontextStyle',
		props: {
			// $store.state.$currentproperties: Object,
		},
		created() {},
		data() {
			let checkAge = (rule, value, callback) => {
				if (value.length === 0) callback(new Error('请输入有效数字'))
				if (value > 99) callback(new Error('数字最大为99'))
			}
			let kon = (rule, value, callback) => {
				if (value.length === 0) callback(new Error('请输入有效数字'))
			}
			return {
				options: [],
				rules: {
					wordSize: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}],
					descriptionSize: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}, ],
					wordWeight: [{
						required: true,
						validator: kon,
						trigger: 'blur'
					}],
					descriptionWeight: [{
						required: true,
						validator: kon,
						trigger: 'blur'
					}, ],
				},
				predefineColors: [
					// 颜色选择器预设
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#90ee90',
					'#00ced1',
					'#1e90ff',
					'#c71585',
					'#409EFF',
					'#909399',
					'#C0C4CC',
					'rgba(255, 69, 0, 0.68)',
					'rgb(255, 120, 0)',
					'hsv(51, 100, 98)',
					'hsva(120, 40, 94, 0.5)',
					'hsl(181, 100%, 37%)',
					'hsla(209, 100%, 56%, 0.73)',
					'#c7158577',
				],
			}
		},
		methods: {},
	}
</script>

<style scoped lang="scss">
	.captiontextstyle {


		/* 颜色选择器 */
		.picke {
			float: right;
		}

		/* 位置 */
		.weiz {
			text-align: right;

			i {
				padding: 5px 12px;
				margin-left: 10px;
				border-radius: 0;
				border: 1px solid #ebedf0;
				font-size: 20px;
				font-weight: 500;
				cursor: pointer;

				&:last-child {
					font-size: 22px;
				}

				&.active {
					color: #155bd4;
					border: 1px solid #155bd4;
					background: #e0edff;
				}
			}
		}

		::v-deep .wid .el-form-item__label {
			width: 94px !important;
		}

		::v-deep .wid .el-form-item__content {
			float: right;
		}
	}
</style>
